<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <style>
      .crumbs {
        font-size: 14px;
        color: #ccc;
      }

      .content .item {
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .content .item img {
        width: 100%;
        height: 100%;
        box-shadow: 0px 0px 10px #ccc;
      }

      .content .item .title:hover {
        text-decoration: underline;
        cursor: pointer;
      }

      .content .item div:first-child:hover img {
        opacity: 0.7;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
      }

      .content .item .intro {
        margin-top: 10px;
        color: #ccc;
        font-size: 14px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"
            >
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="display: flex">
              明德 博客
            </a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div
            class="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1"
          >
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">首页</a></li>
              <li class="dropdown">
                <a
                  href="#"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                  role="button"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >分类 <span class="caret"></span
                ></a>
                <ul class="dropdown-menu">
                  <li><a href="/cate.html?id=2">html</a></li>
                  <li><a href="/cate.html?id=2">css</a></li>
                  <li><a href="/cate.html?id=2">javascript</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="/cate.html?id=2">mysql</a></li>
                  <li><a href="/cate.html?id=2">Linux</a></li>
                </ul>
              </li>
              <li><a href="/tags.html">标签</a></li>
              <li><a href="/about.html">关于我</a></li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>

      <div>
        <h4 class="crumbs" id="crumbs" style="text-align: left"></h4>
      </div>

      <div class="content">
        <div class="artlist" id="artlist">
          <!-- <div class='item row'>
					<div class="col-md-2">
						<img src="http://placehold.it/170x100/ff3333/ffffff?text=like%20you" alt="">
					</div>
					<div class="col-md-10">
						<div class="date ">作者：admin 、 2019-12-08 、分类：前端</div>
						<div class="title">这是介绍中vscode...</div>
						<div class="intro">这是介绍中vscode这是介绍中vscode这是介绍中vscode...</div>
					</div>
					<hr>
				</div> -->
        </div>
      </div>

      <button type="button" class="btn btn-block">查看更多</button>
      <hr />

      <div
        class="footer"
        style="text-align: center; font-size: 14px; color: #999; margin: 10px 0"
      >
        首页 | 主站 | GitHub | created at 2020/02/4 | Powered by 明德
      </div>
    </div>
  </body>
  <script src="./js/jquery.js"></script>
  <script src="./bootstrap/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.2/moment.js"></script>
  <script type="text/javascript">
    // 1. 获取地址栏中查询字符串id
    let reg = /\?cate_id=(\d+)/;
    let [, cate_id] = location.search.match(reg);
    // 2. 发请求获取数据并渲染页面（前端渲染）
    async function getCateArt(id) {
      console.log(id);
      let result = await $.get("http://localhost:8800/api/catelist", {
        cate_id: id
      });
      console.log(result);
      let articleHtmls = "";

      // 导航栏
      $("#crumbs").html(
        `当前位置：<a href="/">首页</a>  / ${result[0].cate_name} `
      );
      result.forEach((item) => {
        let { id, cat_id, article, img, author,addtime,content,Audit_status,cate_name,is_delete,username } = item;
        addtime = moment(addtime).format("YYYY-MM-DD");
        let imgSrc = `http://localhost:8800/${img}`;
        console.log(imgSrc);
        articleHtmls += `
				<div class='item row'>
					<div class="col-md-2">
						<a href="/detail.html?id=${id}"><img src="http://localhost:8800/${img}" alt=""></a>
					</div>
					<div class="col-md-10">
						<div class="date ">作者：${username} 、 ${addtime} 、分类：<a href="/cate.html?cate_id=${cat_id}">${cate_name}</a></div>
						<a href="/detail.html?id=${id}"><div class="content">${content}...</div></a>
						<div class="intro">${content}...</div>
					</div>
					<hr>
				</div>
			`;
      });
      // 赋值
      $("#artlist").html(articleHtmls);
    }

    getCateArt(cate_id);
  </script>
</html>
